<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="renderer" content="webkit" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>{:get_system_config('web','admin_title')}</title>	
	<style type="text/css">
		html,body {width: 100%;height: 100%;background: #EAF3FF;margin: 0;padding: 0;}
		
		div,p {margin: 0;padding: 0;}
		
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px white inset;
		}
		
		#container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;overflow: hidden;background: url({__IMG__}/bg.png);background-size: cover;}
		
		.login-title {position: absolute;top: 50%; margin-top:-322px; left:0; width:100%; text-align:center; font-size:22px;}
		
		.login {width: 872px;height: 492px;position: absolute;top: 50%;left: 50%;margin-top: -258px;margin-left: -436px;border-radius: 12px;background-color: #fff;box-shadow: 0 2px 6px rgba(26, 26, 26, .32);flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: nowrap;
			display: flex;
			display: -webkit-flex;
		}

		.login-img {width: 436px;height:492px;border-radius: 12px 0 0 12px;}

		.right-wrap {flex: 1;height: 100%;position: relative;box-sizing: border-box;}

		.right-wrap .login-logo {padding: 20px 0 15px; text-align: center;}

		.login-logo img{height:60px;}

		.login-way{height:39px;text-align: center;}
		.login-way>span {display: inline-block;color: #999999;font-size: 16px;margin: 0 20px;}
		.login-way>span:after {content: "";display: block;width: 36px;height: 3px;margin: 6px auto 0;}
		.login-way .active {color: #1a1a1a;}
		.login-way .active:after {background: #EB3F3B;}
		
		.form-item{width: 300px; margin:0 auto; padding: 8px 0;}
		.login-input {width: 100%;height: 38px;text-indent: 10px;border: 1px solid #ddd;border-radius:3px; padding:0;}
		.login-input:hover {border-color: #4385F5;}
		.login-input:focus {border-color:#4385F5;border-right-width: 1px !important;outline: 0;
			box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
			-webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
		}
		.captcha-img{width:152px; height:38px; display:inline-block; vertical-align:top; border:1px solid #eee; overflow: hidden; border-radius:3px;}
		.captcha-img img {width:152px; height:38px; margin:0; padding:0; border-radius:3px; cursor: pointer;}	

		.login-btn {width: 100%; height: 42px; font-size: 16px; margin-top: 3px; color: #fff; cursor: pointer; border-radius:3px; border:1px solid #4285f4; background-color: #4285f4;}
		.login-btn:focus {border-color:#4385F5; border-right-width: 1px !important;outline: 0;}
		
		.footer-link{width: 300px; margin:0 auto; padding:10px 0; height:20px; font-size:14px;}
		.footer-operation{width: 300px;margin:0 auto;padding-top:10px;line-height:3;font-size: 14px;text-align:center;color:#999}
		.footer-operation a{margin:0 10px;}
		.form-box a{color: #666;text-decoration:none;}
		.form-box a:hover{color: #458BF3;}
		.foot {position: absolute;font-size: 12px;bottom: 28px;text-align: center;width: 100%;color: #458BF3;}
	</style>
</head>

<body>
	<div id="container">
		<div class="login">
			<img src="{__IMG__}/login_img.jpg" class="login-img">
			<div class="right-wrap">
				<div class="login-logo"><a href="/"><img src="{__IMG__}/login_logo.png"></a></div>
				<div class="login-wrap">
					<div class="login-way">
						<span class="active">帐号登录</span>
					</div>
					<div class="account-login">
						<div class="form-box">
							<form id="gouguLogin">
								<div class="form-item">
									<input type="text" name="name" placeholder="账户" autocomplete="off" class="login-input">
								</div>
								<div class="form-item">
									<input type="password" name="password" placeholder="密码" autocomplete="off" class="login-input">
								</div>
								<div class="form-item">
									<div style="width:140px;display:inline-block;">
										<input type="text" name="captcha" placeholder="验证码" autocomplete="off" class="login-input" style="width: 140px;">
									</div>
									<div class="captcha-img">
										{:captcha_img()}
										<input type="hidden" value="{:make_token()}" />
									</div>
								</div>
								<div class="form-item">
									<button id="loginSubmit" type="button" class="login-btn">登录</button>
								</div>
							</form>
							<div class="footer-operation">
								<p><a>忘记密码？</a></p>
								<p>还没有帐号？<a href="/home/login/reg">立即注册</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			{:get_system_config('web','copyright')} <a id="beian" href="//www.beian.miit.gov.cn" target="_blank"
				rel="nofollow" style="margin-left: 12px;color:#458BF3">{:get_system_config('web','icp')}</a>，Powered by GouguCMS
		</div>
	</div>
	<script language="javascript" src="{__JS__}/jquery.min.js"></script>
	<script language="javascript" src="{__JS__}/layer/layer.js"></script>
	<script type="text/javascript">
		$('#loginSubmit').on('click', function () {
			$.ajax({
				url: "/home/login/login_submit",
				data: $('#gouguLogin').serialize(),
				type: 'post',
				async: false,
				success: function (res) {
					layer.msg(res.msg);
					if (res.code === 0) {
						setTimeout(function () {
							window.location.href="{:url('/home/user/index')}";
						}, 1500);
					} else {
						$('[alt="captcha"]').click();
					}
				}
			})
		});
	</script>
</body>

</html>